<template>
  <div :class="{ hidden: hidden }" class="pagination-container">
    <!-- 父组件传参时需要使用sync 例如：:page.sync="page" :limit.sync="limit" -->
    <el-pagination
      v-if="total > pageSize"
      :background="background"
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :page-sizes="hasPageSizes ? pageSizes : []"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
// 分页器组件
export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number,
      default: 0,
    },
    // 当前页码
    page: {
      type: Number,
      default: 1,
    },
    // 一页显示多少条数
    limit: {
      type: Number,
      default: 10,
    },
    // 分页器布局样式
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper',
    },
    // 分页器带背景颜色
    background: {
      type: Boolean,
      default: true,
    },
    // 是否需要隐藏分页器
    hidden: {
      type: Boolean,
      default: false,
    },
    // 每页显示个数选择器的选项设置
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 50],
    },
  },
  computed: {
    // 当前页码
    currentPage: {
      get() {
        return this.page
      },
      set(value) {
        this.$emit('update:page', value)
      },
    },
    // 一页显示多少条数
    pageSize: {
      get() {
        return this.limit
      },
      set(value) {
        this.$emit('update:limit', value)
      },
    },
    // 是否需要每页显示个数选择器的选项设置
    hasPageSizes() {
      return this.layout.split(',').includes('sizes') > -1
    },
  },
  methods: {
    // 页码发生改变
    handleCurrentChange(page) {
      this.currentPage = page
      this.$emit('pagination', { page, limit: this.limit })
    },
    // 每页显示条数发生改变
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
    }
  },
}
</script>

<style lang="scss" scoped>
// 是否需要隐藏分页器
.pagination-container .hidden {
  display: none;
}
</style>
